<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

    <ui:define name="loginUsuario" />

    <ui:define name="panelCentral" >

        <h:form>
            
            <p:wizard flowListener="#{promocionManual.onFlowProcess}"
                      backLabel="Atrás" nextLabel="Siguiente" >

                <p:tab id="seleccionCombo" title="Elija su combo">

                    <p:panel header="Combos disponibles" style="height: 400px;">

                        <p:messages showDetail="true" id="message"/>
                        <p:selectManyCheckbox id="pageDirection" value="#{promocionManual.combosSeleccionados}"
                            layout="pageDirection">
                            <f:selectItems value="#{promocionManual.combos.entrySet()}" var="e"
                                           itemValue="#{e.key}" itemLabel="#{e.value}" />
                        </p:selectManyCheckbox>
                    </p:panel>
                </p:tab>

                <p:tab id="cantidades" title="Cantidades">

                    <p:panel header="Ingrese las cantidades a pedir y condición de pago" style="height: 400px;">

                        <p:messages showDetail="true" />
                        <ui:repeat value="#{promocionManual.combosPromocion}" var="c" >
                            <p>
                                <h:outputText value="#{c.descripcion}" />
                                <p:spacer width="20"/>
                                <h:outputText value="Cantidad:" styleClass="colLabel" />
                                <p:spacer width="5"/>
                                <p:inputText value="#{c.cantidad}" size="5" style="text-align: right;"
                                             required="true" requiredMessage="La cantidad en #{c.descripcion} es necesaria" >
                                    <f:convertNumber pattern="0"/>
                                </p:inputText>
                            </p>
                        </ui:repeat>

                        <h:panelGrid columns="2" columnClasses="colLabel,colDato" style="width: 400px;" >

                            <h:outputText value="Condición de pago" />
                            <p:selectOneMenu value="#{promocionManual.condicionPago}" required="true"
                                             label="Condición de pago"
                                             requiredMessage="Seleccione una condición de pago por favor">
                                <f:selectItem itemLabel="Seleccionar" itemValue="" />
                                <f:selectItem itemLabel="Contado"               itemValue="Contado" />
                                <f:selectItem itemLabel="Cuenta Corriente"      itemValue="Cuenta Corriente" />
                            </p:selectOneMenu>

                        </h:panelGrid>

                    </p:panel>
                </p:tab>

               <p:tab id="identificacion" title="Identificación">

                    <p:panel header="Identificación en la tienda virtual" style="height: 400px;">

                        <p:messages showDetail="true" />
                        <div style="width: 400px; margin-bottom: 15px;">
                            <p:inputText id="txtUsuario" value="#{usuarioSessionBean.usuario.nombre}"

                                     requiredMessage="El usuario es obligatorio" size="13" >
                                <f:validateLength maximum="20" />
                            </p:inputText>
                            <p:watermark for="txtUsuario" value="Usuario" />

                            <p:spacer width="5" height="10" />

                            <p:password value="#{usuarioSessionBean.usuario.password}" feedback="false" id="txtPassword"
                                    maxlength="20"
                                    requiredMessage="La clave es obligatoria" size="13"
                                     />
                            <p:watermark for="txtPassword" value="Clave" />

                            <p:spacer width="5" height="10" />

                        </div>
                        
                        <h:panelGrid columns="2" >

                            <p:selectBooleanCheckbox value="#{promocionManual.skipLogin}" />
                            <h:outputText value="No recuerdo mis datos de acceso. Deseo ingresar la información personalmente"
                                          style="font-size: 12px; font-weight: bold;"/>

                        </h:panelGrid>
                    </p:panel>

                </p:tab>

                 <p:tab id="datos" title="Sus Datos">

                    <p:panel header="Ingrese sus datos" style="height: 400px;">

                        <p:messages showDetail="false" />

                        <h:panelGrid columns="2" columnClasses="colLabel,colDato" >

                            <h:outputText value="Razón Social*:" />
                            <p:inputText value="#{promocionManual.razonSocial}"
                                         size="60" required="true" requiredMessage="La razón social es obligatoria" />

                            <h:outputText value="Cuit*:" />
                            <p:inputMask value="#{promocionManual.cuit}" mask="99-99999999-9"
                                         size="14" required="true" requiredMessage="El número de cuit es obligatorio"  />

                            <h:outputText value="E-mail:" />
                            <p:inputText value="#{promocionManual.direcciónEmail}" size="40" />

                            <h:outputText value="Notas o aclaraciones" />
                            <p:inputTextarea cols="60" rows="3" value="#{promocionManual.observaciones}" />

                        </h:panelGrid>
                    </p:panel>

                </p:tab>

                <p:tab id="confirmacion" title="Confirmación de compra">

                    <p:panel header="Confirmación de compra" style="height: 400px;">

                        <p:messages showDetail="true" />

                        <p:commandButton value="Confirmar compra" icon="ok16"
                                         rendered="#{not promocionManual.compraConfirmada}"
                                         actionListener="#{promocionManual.confirmarCompra}"
                                         update="@form" process="@this" />

                        <h:commandLink value="Ir al Home"  action="/global/index.xhtml" immediate="true"
                                       rendered="#{promocionManual.compraConfirmada}"
                                       style="font-size: 12px; font-weight: bold;"/>

                    </p:panel>
                </p:tab>
                
            </p:wizard>

            <div style="width: 200px; height: 100%; position: relative; float: left; top: 5px; margin-left: 5px;">
                 <ui:include src="../template/ajaxStatus-I.xhtml" />
            </div>

        </h:form>
        
        <p:spacer height="30"/>

  </ui:define>
    
</ui:composition>